@import '../../../../styles/modules/all';

app-alert {
  --color-alert-text: #{$color-text1-default};

  display: block;

  @include theme-dark {
    --color-alert-text: #{$color-text1-dark};
  }

  .alert {
    @include animation-fade-in;
    @include animation-fade-out;

    border-radius: 0;
    border-width: 0;
    color: var(--color-alert-text);
    margin: 0 auto;
    max-width: $width-tablet-small;
    padding: 0.75rem;
    position: fixed;
    width: 100%;
    z-index: 1010;

    &-danger {
      background-color: var(--color-danger);
    }

    &-info {
      background-color: var(--color-success);
    }

    &-warning {
      background-color: var(--color-warning);
    }

    a {
      border-bottom-color: var(--color-alert-text);
      color: var(--color-alert-text);

      @media (hover: hover) {
        &:active,
        &:focus,
        &:hover {
          border-bottom-color: var(--color-alert-text);
          color: var(--color-alert-text);
        }
      }
    }

    icon-button {
      color: var(--color-alert-text);
      position: absolute;
      right: 0.5rem;
      top: 0.5rem;
    }

    h4,
    p {
      margin-right: 2rem;
    }

    h4 {
      margin-bottom: 0.5rem;
    }

    p {
      margin-bottom: 0;
    }

    @media (min-width: $width-mobile-small + 1) {
      font-size: 0.9rem;

      h4 {
        margin-bottom: 0 !important;
        margin-top: -0.4rem;
      }

      p {
        max-width: 95%;
      }
    }
  }
}
